<template>
	<view class="note">
		<view class="note-section">
			<u-radio-group shape="circle" @change="radioGroupChange">
				<view class="note-item u-flex" v-for="(item, index) in groupMemberList" :key="index">
					<view class="note-item_avatar">
						<u-image v-if="item.UserAvatar" width="72rpx" height="72rpx" border-radius="72rpx" :src="item.UserAvatar"></u-image>
						<u-image v-else width="72rpx" height="72rpx" border-radius="72rpx" src="/static/images/avatar.jpg"></u-image>
					</view>
					<view class="note-item_content u-flex u-flex-1 u-border-bottom">
						<view class="note-item_content--name u-flex-1">{{item.UserName}}</view>
						<u-radio
							:name="item.User"
						></u-radio>
					</view>
				</view>
			</u-radio-group>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-bottom="45" margin-top="45" color="#C1C0C0" />
		<!-- 转让提示弹窗 -->
		<u-modal v-model="transferVisible" :show-cancel-button="true" :show-title="false" :cancelText="$t('chat.btn_cancel')" :confirmText="$t('chat.btn_confirm')" 
		:content="content" @cancel="cancelTransfer" @confirm="actComfirm"></u-modal>
	</view>
</template>

<script>
import pageMixin from '@/utils/pageMixin';
export default {
  mixins: [pageMixin],
		data() {
			return {
				gid: 0,
				groupMemberList: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: this.$t('mine.pull_up'),
					loading: this.$t('mine.loading'),
					nomore: this.$t('mine.note_no_more'),
				},
				userId: 0,
				userName:'',
				transferVisible:false,
				content: '',
			}
		},

		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.$t('chat.chat_group_trans')
			})
			this.gid = option.gid || 0;
			this.getGroupMemberList();
		},
		onShow() {
		},
		components: {
		},
        computed: {
			i18n() {
				return this.$t('chat')
			}
        },
		methods: {
			getGroupMemberList() {
				this.$http.get('/mgr/user/group/member/list/data', {
					gid: this.gid,
					user_id: this.vuex_user.uid,
				}).then(res => {
					this.groupMemberList = res.groupMemberList;
				});
			},
			radioGroupChange(userId) {
				let current = {};
				for (let i = 0; i < this.groupMemberList.length; i++) {
					if (this.groupMemberList[i].User == userId) {
						current = this.groupMemberList[i];
						break;
					}
				}
				this.userId = current.User || 0;
				this.userName = current.UserName || '';
				this.transferVisible = true;
				let content = this.$t('chat.group_transfer_notify');
				content = content.replace('[userName]', this.userName);
				this.content = content;
			},
			actComfirm(){
				let that = this;
				let data = {
					gid: that.gid,
					user_id: that.vuex_user.uid,
					to_user: that.userId,
				};
				that.$http.post('/mgr/user/group/member/transfer', data).then(res => {
					uni.showToast({
						title: that.$t('chat.group_transfer_success_notify'),
					});
					setTimeout(function () {
						that.$u.route({
							type:'back',
							delta:1
						});
					}, 1000);
				});
			},
			cancelTransfer(){
				this.$u.route({
					type:'back',
					delta:1
				})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.note {
		padding-bottom: 88rpx;
	}
	.note-section {
		margin-bottom: 24rpx;
	}
	.u-checkbox-group{
		width: 100%;
	}
	.note-item {
		width: 100%;
		background-color: #fff;
		height: 106rpx;
		padding: 0 24rpx 0 18rpx;
		&_avatar {
			position: relative;
			margin-right: 24rpx;
		}
		&_content {
			height: 100%;
			&--name {
				font-size: 32rpx;
			}
			&--text {
				font-size: 24rpx;
				color: #949C9E;
			}
			.u-checkbox__label {
				display: none;
			}
		}
		&_time {
			font-size: 24rpx;
			height: 76rpx;
			color: #949C9E;
		}
	}
	.note-footer{
		z-index: 999;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		padding: 20rpx 140rpx;
	}
	.slot-content{
		padding: 30rpx 30rpx 0;
	}
</style>